<template>
  <button
    type="button"
    :class="{ 'bg-green': tag.difficult < 1200, 'bg-yellow': tag.difficult >= 1200 && tag.difficult < 2300, 'bg-red': tag.difficult >= 2300 }"
    class="btn btn-sm m-1"
    :style="{ color: 'white' }">
    {{ difficultyText }}
  </button>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue';

interface ProblemDifficultProps {
  difficult: number;
}

export default defineComponent({
  name: 'ProblemDifficult',
  props: {
    tag: {
      type: Object as PropType<ProblemDifficultProps>,
      required: true,
    },
  },
  computed: {
    difficultyText(): string {
      if (this.tag.difficult < 1200) return '简单';
      if (this.tag.difficult >= 1200 && this.tag.difficult < 2300) return '中等';
      return '困难';
    },
  },
});
</script>

<style scoped lang="less">
.bg-green {
  background-color: green;
}

.bg-yellow {
  background-color: #efbb13;
}

.bg-red {
  background-color: red;
}
</style>
